<template>
    <div class="right_box">
        <div class="top_box">
            <div class="right_title">
                <div>
                    水电用量
                </div>
            </div>
            <div class="right_top_chart">
                <!-- 水电用量 -->
                <div class="hydropower">
                    <div class="electricity">
                        <img src="../../../assets/images/用电量.png" alt="">
                        <span>总用电量{{ totalElectricity }}</span>
                    </div>
                    <div class="water">
                        <img src="../../../assets/images/用水量.png" alt="">
                        <span>总用水量{{ totalWater }}</span>
                    </div>
                </div>
                <!-- 图表 -->
                <div class="hydropower_chart" ref="hydropower_chart"></div>
            </div>
        </div>
        <div class="bottom_box">
            <div class="right_title">
                <div>
                    校园人员流动情况
                </div>
            </div>
            <div class="right_bottom_chart">
                <div class="right_bottom_icon">
                    <div>
                        <img src="../../../assets/images/yestoday.png" />
                        <div>
                            <span>1</span>
                            <span>昨日外来访客</span>
                        </div>
                    </div>
                    <div>
                        <img src="../../../assets/images/today.png" />
                        <div>
                            <span>1</span>
                            <span>今日外来访客</span>
                        </div>
                    </div>
                </div>
                <div class="right_bottom_chart" ref="right_bottom_chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { getFlow, getHdropower } from '../../../api';
import './right.css'

const optionT = ref({
    grid: {
        left: '14%',
        right: '10%',
        top: '30%',
        bottom: '14%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['教学用水', '安防设备用电', '生态用水', '生活用水'],
        textStyle: {
            color: 'white',
        },
        icon: "circle"
    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
        },
        {
            name: 'Steppe',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
        },
        {
            name: 'Desert',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
        },
        {
            name: 'Wetland',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [98, 77, 101, 99, 40]
        }
    ]
});
const optionB = ref({
    grid: {
        left: '12%',
        right: '10%',
        top: '24%',
        bottom: '14%'
    },
    legend: {
        icon: 'circle',
        textStyle: {
            color: 'white'
        }
    },
    tooltip: {},
    dataset: {
        dimensions: ['product', '2015', '2016'],
        source: [
            { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
            { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },

        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{
        type: "bar",
        itemStyle: {
            // 柱子颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2a37ff" },
                { offset: 0.5, color: "#711cff" },
                { offset: 1, color: "#b205ff" },
            ]),
            // 圆弧
            barBorderRadius: 15,
        },
        // 柱子粗细
        barWidth: "15%",
    },
    {
        type: "bar",
        itemStyle: {
            // 柱子颜色 单色
            color: "#38da84",
            barBorderRadius: 15,
        },
        barWidth: "15%",
    }]
});

const hydropower_chart = ref(null);
const right_bottom_chart = ref(null);

const totalWater = ref(0);
const totalElectricity = ref(0);

// 右上角水电
const fetchHydropowerData = async () => {
    try {
        const res = await getHdropower();
        const reshdropower = res.data.data.result[0];
        optionT.value.series = reshdropower.series;
        optionT.value.xAxis = reshdropower.yAxis;

        reshdropower.series.map((item) => {
            for (let key in item.data) {
                if (key === '1') {
                    totalElectricity.value += item.data[key];
                } else {
                    totalWater.value += item.data[key];
                }
            }
        })

        const myhydropower_chart = echarts.init(hydropower_chart.value);
        myhydropower_chart.setOption(optionT.value);
    } catch (error) {
        console.error('获取水电数据时出错:', error);
    }
}

// 右下角人员流动
const fetchFlowData = async () => {
    try {
        const res = await getFlow();
        let resflow = res.data.data.result[0];
        optionB.value.dataset.dimensions = resflow.dimensions;
        optionB.value.dataset.source = resflow.source;

        const myright_bottom_chart = echarts.init(right_bottom_chart.value);
        myright_bottom_chart.setOption(optionB.value);
    } catch (error) {
        console.error('获取流数据时出错:', error);
    }
}

onMounted(() => {
    fetchHydropowerData();
    fetchFlowData();

    window.addEventListener('resize', () => {
        if (hydropower_chart.value) echarts.getInstanceByDom(hydropower_chart.value).resize();
        if (right_bottom_chart.value) echarts.getInstanceByDom(right_bottom_chart.value).resize();
    })
})

</script>

<style></style>
